<template>
  <div class="classification">
    <div class="container">
      <div
        class="item"
        v-for="(item, index) in viewShow"
        :key="index"
        @click="goBookLists(item.title, item.key)"
      >
        <div class="top">
          <div class="img img_left">
            <img v-lazy="item.picLift" alt="" />
          </div>
          <div class="img">
            <img v-lazy="item.picCenter" alt="" />
          </div>
          <div class="img img_right">
            <img v-lazy="item.picRight" alt="" />
          </div>
        </div>
        <div class="bottom">
          <p class="type">{{ item.title }}</p>
          <p class="nums">{{ item.booksNum }}本书</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classificationlist: [], //结果列表
      viewShow: [
        {
          title: "玄幻奇幻",
          key: "玄",
          booksNum: "13350",
          picLift:
            "https://easyreadfs.nosdn.127.net/K5fQaHjCKM1ffu4BbUhZjw==/8796093025071771180",
          picCenter:
            "https://easyreadfs.nosdn.127.net/HQK1f-egGwi6nbXpMbJCOg==/8796093025075467512",
          picRight:
            "https://easyreadfs.nosdn.127.net/gZ6PrlBbl-46gXUnTPjotg==/8796093024862037866",
        },
        {
          title: "武侠仙侠",
          key: "侠",
          booksNum: "9520",
          picLift:
            "https://easyreadfs.nosdn.127.net/ZVjZtV_ZX8Fw8cU0v_ZZUg==/8796093025071863046",
          picCenter:
            "https://easyreadfs.nosdn.127.net/H_-x9cZErXoNV-R3T5rpXQ==/8796093024995190498",
          picRight:
            "https://easyreadfs.nosdn.127.net/LJOihu31uLw_N7cuslIfZg==/8796093024972355362",
        },
        {
          title: "都市言情",
          key: "总裁",
          booksNum: "11658",
          picLift:
            "https://easyreadfs.nosdn.127.net/2EzdoAnSLZ5JcwP9JS7VEw==/8796093024380991038",
          picCenter:
            "https://easyreadfs.nosdn.127.net/sZBF3TEzbhls-9m9ZdEibA==/8796093022824234039",
          picRight:
            "https://easyreadfs.nosdn.127.net/sZBF3TEzbhls-9m9ZdEibA==/8796093022824234039",
        },
        {
          title: "历史军事",
          key: "军",
          booksNum: "1123",
          picLift:
            "https://easyreadfs.nosdn.127.net/yYPxKQG4KfY42q0bh7KgvQ==/8796093023913080607",
          picCenter:
            "https://easyreadfs.nosdn.127.net/Ew8U5zmsK-sKBVJVG80drQ==/8796093022626967292",
          picRight:
            "https://easyreadfs.nosdn.127.net/97xpfJdf3uarQZLnrbcm2A==/8796093024808843835",
        },
        {
          title: "科幻灵异",
          key: "科幻",
          booksNum: "3826",
          picLift:
            "https://easyreadfs.nosdn.127.net/m0SaZJBgmL2yJe4XvDLYYQ==/8796093025028467422",
          picCenter:
            "https://easyreadfs.nosdn.127.net/qZsKmNeQ0Ln0jW8a-LflxQ==/6597164324656316437",
          picRight:
            "https://easyreadfs.nosdn.127.net/rgBawhdJXKIo_qGRXSuzHg==/8796093024395499316",
        },
        {
          title: "网游竞技",
          key: "游戏",
          booksNum: "663",
          picLift:
            "https://easyreadfs.nosdn.127.net/ltHeAuetPVcExuqEppvlUg==/8796093024910856893",
          picCenter:
            "https://easyreadfs.nosdn.127.net/yKesQypDnjGvOKATRjinpA==/8796093024939659929",
          picRight:
            "https://easyreadfs.nosdn.127.net/24v_kEO_QnjrNp6qVSPdgg==/8796093024828905428",
        },
        {
          title: "女生频道",
          key: "宫斗",
          booksNum: "958",
          picLift:
            "https://easyreadfs.nosdn.127.net/WiI6ZJgns30_qYyWR6u-wQ==/8796093024686125441",
          picCenter:
            "https://easyreadfs.nosdn.127.net/GLWQSrUh5lYoLoAzh7VwFA==/8796093024687317518",
          picRight:
            "https://easyreadfs.nosdn.127.net/WiI6ZJgns30_qYyWR6u-wQ==/8796093024686125441",
        },
        {
          title: "同人小说",
          key: "乡村",
          booksNum: "3468",
          picLift:
            "https://easyreadfs.nosdn.127.net/biL9EYSwSI_YBRvd21AUKg==/8796093024778466774",
          picCenter:
            "https://easyreadfs.nosdn.127.net/rgBawhdJXKIo_qGRXSuzHg==/8796093024395499316",
          picRight:
            "https://easyreadfs.nosdn.127.net/tzg67x9rDBAESW_3friDaA==/8796093024799209756",
        },
      ], //页面展示的图片和文字
    };
  },
  methods: {
    
    // 前往列表
    goBookLists(title, key) {
      this.$router.push({ name: "booklists", query: { title, key } });
    },
  },
};
</script>

<style lang="less">
.classification {
  width: 100%;
  height: calc(100vh - 144px);
  background-color: #f8f8f8;
  padding-top: 10px;
  .container {
    flex: 1;
    padding: 0 5px;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: calc(33.33333% - 10px);
      height: 110px;
      margin: 9px 5px;
      background-color: #f0f1f3;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      .top {
        flex: 1;
        position: relative;
        .img {
          background-color: #ccc;
          width: 38px;
          height: 48px;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          margin: auto;
          z-index: 2;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .img_left {
          width: 22px;
          height: 34px;
          z-index: 1;
          background-color: blue;
          transform: translate3d(22px, 0px, 40px);
        }
        .img_right {
          width: 22px;
          height: 34px;
          z-index: 1;
          background-color: red;
          transform: translate3d(-22px, 0px, 40px);
        }
      }
      .bottom {
        flex: 0 0 40px;
        p {
          text-align: center;
        }
        .type {
          font-size: 14px;
          color: #1f1f1e;
          font-weight: 550;
        }
        .nums {
          font-size: 12px;
          color: #a5a5a6;
        }
      }
    }
  }
}
</style>